import React from 'react';
import { Modal, Button } from 'antd';
import Api from 'Utils/api';
import { connect } from 'react-redux';
import './index.scss';

class SubmitModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      score: 0,
      tester_id: 0,
    };
  }
  showModal(answer) {
    this.setState({
      visible: true,
      answer
    });
    const api = new Api({
      method: 'POST',
      path: '/results/user',
      query: {
        tester_id: this.props.id,
        subject_id: this.props.testID
      },
      data: {
        answers: answer
      },
      success: (res) => {
        this.setState({
          score: res.score,
          tester_id: res.tester_id,
        });
      },
      error: () => {}
    });
    api.run();
  }
  onCancel() {
    const { handleModalOk } = this.props;
    this.setState({
      visible: false,
    }, handleModalOk && handleModalOk());
  }
  render() {
    const { score } = this.state;
    return (
      <Modal
        title="测评得分"
        visible={this.state.visible}
        width={760}
        heigth={718}
        onCancel={this.onCancel.bind(this)}
        className="submit-modal-page"
        footer={null}
        maskClosable={false}
      >
        <div className="modal-score">
          <img src="images/interactive/icon_flower.png" alt="撒花" />
          <div className="sore">
            {score}分
          </div>
        </div>
        <div className="content">
          您是第{this.state.tester_id}位参与测评的人员，{ score >= 60 ? '恭喜你通过了' : '很遗憾你没有通过'}食安知识测试!
        </div>
        <div className="modal-footer">
          <Button className="modal-okbtn" onClick={this.onCancel.bind(this)}>
            确定
          </Button>
        </div>
      </Modal>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.userReducer,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    ...dispatch
  };
}

function mergeProps(stateProps, dispatchProps, ownProps) {
  return {
    ...stateProps,
    ...dispatchProps,
    ...ownProps
  };
}

export default connect(mapStateToProps, mapDispatchToProps, mergeProps, { withRef: true })(SubmitModal);

